<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 1. 对象的解构赋值
        var goodsPhoneObj = {
            goodsName: '小米 P50',
            goodsBrandsNews: '小米为',
            goodsCountSale: undefined,
            goodsColorSale: ['香槟金', '土豪红', '葡萄紫'],
            goodsFn: function () {
                console.log(this.goodsName);
            },
            goodsRefPro: {
                name: '小辣椒'
            }
        }

        // 解构对象必须带声明的关键字 - 无序属性
        let {
            goodsBrandsNews: brands,
            goodsCountSale: counts = 10,
            goodsFn,
            goodsRefPro,
            goodsColorSale, num = 100
        } = goodsPhoneObj;

        // console.log(goodsBrandsNews);
        // goodsPhoneObj.goodsFn();
        // goodsFn(); // 内部的this指向window了

        // 2.0 修改对象的数据
        goodsName = 'viva'; // 值类型的修改
        goodsColorSale.pop();
        goodsRefPro.name = '小垃圾';

        // console.log(goodsName);

        // 3.0 没有该属性 - 设置默认值
        console.log(num);
        console.log(goodsPhoneObj);

        // 4.0 解构对象实现命名优化
        // var brands = goodsPhoneObj.goodsBrandsNews
        console.log(brands);
        // 当对象的属性为 undefined 的时候，可以给一些默认值替代
        console.log(counts);


    </script>
</body>

</html>